<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 添加
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">

                    <el-form-item label="角色名称" prop="noticeTitle">
                        <el-input v-model="form.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色介绍" prop="summary">
                        <el-input type="textarea" rows="5" v-model="form.Introduce"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="editor-btn" type="primary" @click="submit('form')">提交</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import {addRole} from "../../api/role";

    export default {
        name: 'AddRole',
        data: function () {
            return {
                contentText: '',
                form: {
                    noticeTitle: "",
                    noticeType: undefined,
                    roleName: "",
                    Introduce: ""

                },
                role:{
                    roleName:''
                },
                rules: {
                    roleName: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'},
                    ],
                    Introduce : [
                        {required: true, message: '请输入角色介绍', trigger: 'blur'},
                    ]
                }
            }
        },
        components: {
            mavonEditor
        },
        methods: {
            change(value, render) {
                this.form.content = render;
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        addRole(this.form).then(res => {
                            this.$message.success('提交成功！');
                            this.$router.push("/role");
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.contentText = "";
            }
        }
    }
</script>
<style scoped>
    .editor-btn {
        margin-top: 20px;
    }
</style>
